<template>
  <div class="flex items-center">
    <span
      class="w-16 h-16 text-center radius-percentage-50 font-12 color-FFFFFF line-height-16"
      v-if="['customer', 'supplier'].includes(type)"
      :class="type === 'customer' ? 'bg-64B5EA' : 'bg-19AA8D'"
      >{{ type === 'customer' ? '客' : '供' }}</span
    >
    <span class="craft" v-if="type === 'craft'">{{ $i18n.t("mind.technology") }}</span>
    <span class="process" v-if="type === 'process'">{{ $i18n.t("mind.nameProcess") }}</span>
    <LabelCopy class="ml-8 text-14 text-333333 leading-14" :text="label" />
  </div>
</template>

<script>
import LabelCopy from './label-copy.vue'

export default {
  name: 'label-icon',
  components: {
    LabelCopy
  },
  props: {
    label: {
      type: String,
      default: ''
    },
    type: {
      type: String,
      default: ''
    }
  }
}
</script>

<style lang="scss" scoped>
.craft {
  background: #64b5ea;
  border-radius: 2px 2px 2px 2px;
  border: 1px solid #64b5ea;
  font-size: 12px;
  line-height: 12px;
  padding: 2px;
  color: white;
}

.process {
  background: #def2ff;
  border-radius: 2px 2px 2px 2px;
  border: 1px solid #64b5ea;
  font-size: 12px;
  line-height: 12px;
  padding: 2px;
  color: #418cbd;
}
</style>
